<template>
  <!-- props.emitPath - 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 -->
  <!-- props.checkStrictly 是否严格的遵守父子节点不互相关联 -->
  <!-- @focus="getDepartments" ==> 有个问题：点击右侧的小箭头时，不会触发 focus 事件，但是会显示下拉菜单 -->
  <!-- 为什么不能直接 v-model="value" ? 因为违反单向数据流，value 是 props 接收的，不能在子组件内直接修改 -->
  <el-cascader
    :options="departments"
    :props="{ label: 'name', children: 'children', value: 'name', emitPath: false, checkStrictly: true }"
    :value="value"
    @input="$emit('input', $event)"
    @visible-change="onVisibleChange"
  ></el-cascader>
</template>

<script>
import { getDepartments } from '@/api/departments';
import { tranListToTreeDataByGroup } from '@/utils';

export default {
  name: 'DepartmentCascader',
  props: {
    value: String,
  },

  // v-model 默认是 :value 和 @input 的组合
  // 但是，可以通过 model 选项来修改
  // model: {
  //   prop: 'name',
  //   event: 'xixi'
  // },
  // 添加了上面的选项后，v-model 就是  :name   @xixi 的组合了

  data() {
    return {
      // v-model="departmentName"
      // departmentName: '',
      departments: [], // 部门列表数据
    };
  },
  // watch: {
  //   departmentName(newValue) {
  //     // newValue === this.departmentName // true
  //     this.$emit('input', newValue)
  //   }
  // },
  methods: {
    // onInput(newValue) {
    //   // 这个时候 选中的值变了，变了，我就要通知父组件
    //   this.$emit('input', newValue)
    // },
    onVisibleChange(isShow) {
      // isShow  true  显示下拉列表时    false 隐藏下拉列表时

      this.$emit(isShow ? 'show' : 'hide');

      // this.$emit('visible-change', isShow);

      // if (isShow) this.$emit('show')
      // else this.$emit('hide')

      // this.getDepartments();
    },
    async getDepartments() {
      const { depts } = await getDepartments({ target: '.el-cascader-panel' });
      // const { depts } = await getDepartments({ target: this.$refs.departmentsCascader.$el });
      this.departments = tranListToTreeDataByGroup(depts, 'pid', '');
    },
  },
  created() {
    this.getDepartments();
  },
};
</script>

<style></style>
